<template>
  <div>
    <header>购物车</header>

    <div class="container">
      <div v-if="shopCart.length > 0">
        <div class="item" v-for="(item, index) in shopCart" :key="index">
          <mt-cell-swipe
            :right="[
              {
                content: '删除',
                style: { background: 'red', color: '#fff' },
                handler: () => del(index),
              },
            ]"
          >
            <div class="subcon">
              <div class="check">
                <input
                  type="checkbox"
                  v-model="item.isCheck"
                  @change="selectOne"
                />
              </div>
              <div class="logo">
                <img :src="item.businessLogo" alt="" />
                <span>{{ item.businessName }}</span>
              </div>
              <div class="details">
                <img :src="item.commodityImg" alt="" />
                <div class="details-list">
                  <span> {{ item.commodityName }} </span>
                  <div class="list-more">
                    <span>颜色分类:{{ item.commodityColor }}</span>
                    <span>存储容量:{{ item.commoditySize }}</span>
                  </div>
                  <div class="list-price">￥{{ item.commodityPrice }}</div>
                </div>
              </div>

              <div class="num">
                <span>购买数量</span>
                <div>
                  <button @click="btn(false, index)">-</button>
                  <input type="" :value="item.num" />
                  <button @click="btn(true, index)">+</button>
                </div>
              </div>
            </div>
          </mt-cell-swipe>
        </div>
      </div>
      <div v-else class="else">本来无一物，何处惹尘埃</div>
    </div>
    <footer>
      <div class="footer-left">
        全选<input type="checkbox" v-model="isAllSelect" @change="allSelect" />
      </div>
      <div class="footer-mid">
        总计:
        <span>￥{{ totalPrice }}</span>
      </div>
      <div class="footer-right">结算</div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalPrice: 0,
      isAllSelect: false,
      shopCart: [
        {
          id: "001",
          businessLogo: require("@/assets/img/apple.webp"),
          businessName: "Apple Store 官方旗舰店",
          commodityImg: require("@/assets/img/iphone13.webp"),
          commodityName: "iPhone13",
          commodityColor: "星光色",
          commoditySize: "128GB",
          commodityPrice: "5999",
          num: 1,
          isCheck: false,
        },
        {
          id: "002",
          businessLogo: require("@/assets/img/mi.webp"),
          businessName: "小米官方旗舰店",
          commodityImg: require("@/assets/img/mix4.png"),
          commodityName: "小米Mix4",
          commodityColor: "影青灰",
          commoditySize: "128GB",
          commodityPrice: "4999",
          num: 1,
          isCheck: false,
        },
        {
          id: "003",
          businessLogo: require("@/assets/img/olympic.webp"),
          businessName: "奥林匹克官方旗舰店",
          commodityImg: require("@/assets/img/dwen.webp"),
          commodityName: "冰墩墩",
          commodityColor: "黑白多色",
          commoditySize: "/",
          commodityPrice: "199",
          num: 1,
          isCheck: false,
        },
        {
          id: "004",
          businessLogo: require("@/assets/img/olympic.webp"),
          businessName: "奥林匹克官方旗舰店",
          commodityImg: require("@/assets/img/rhon.webp"),
          commodityName: "雪容融",
          commodityColor: "红白多色",
          commoditySize: "/",
          commodityPrice: "99",
          num: 1,
          isCheck: false,
        },
      ],
    };
  },
  methods: {
    getTotalPrice() {
      let price = 0;
      this.shopCart.forEach((item) => {
        if (item.isCheck) {
          price += item.num * item.commodityPrice;
        }
      });
      this.totalPrice = price;
    },
    btn(bool, index) {
      console.log(bool, index);
      let shopIndex = this.shopCart[index];
      if (bool) {
        shopIndex.num++;
        this.getTotalPrice();
      } else {
        if (shopIndex.num <= 1) {
          return;
        }
        shopIndex.num--;
        this.getTotalPrice();
      }
    },
    del(index) {
      this.shopCart.splice(index, 1);
      this.getTotalPrice();
    },
    selectOne() {
      for (let i = 0; i < this.shopCart.length; i++) {
        if (!this.shopCart[i].isCheck) {
          this.getTotalPrice();
          this.isAllSelect = false;
          return;
        }
      }
      this.isAllSelect = true;
      this.getTotalPrice();
    },
    allSelect() {
      this.shopCart.forEach((item) => {
        item.isCheck = this.isAllSelect;
        if (this.isAllSelect) {
          this.getTotalPrice();
        } else if (!item.isCheck) {
          this.totalPrice = 0;
        }
      });
    },
  },
  // mounted() {
  //   this.getTotalPrice();
  // },
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}

header {
  height: 50px;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #fff;
  z-index: 999;
  border-bottom: 1px solid black;
  text-align: center;
  line-height: 50px;
}
.container {
  background-color: #fff;
  padding: 50px 0;
}
.container > .item + .item {
  border-top: 1px solid #ccc;
}

.item {
  padding: 10px;
}

.check {
  display: flex;
}

.logo {
  height: 40px;
  display: flex;
}
.logo img {
  width: 20px;
  height: 20px;
}
.logo span {
  color: #888;
  font-size: 14px;
  margin-left: 20px;
}

.details {
  background-color: #f5f5f5;
  padding: 15px;
  display: flex;
  font-size: 16px;
}
.details img {
  width: 90px;
  height: 90px;
}
.details list {
  margin-left: 15px;
  color: #888;
}

.list-more span {
  display: block;
  color: gray;
  font-size: 14px;
}
.list-price {
  font-size: 16px;
}

.num {
  color: #888;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.num button {
  width: 31px;
  height: 25px;
  background-color: #e0e0e0;
  color: #58595b;
  border: none;
  outline: none;
}
.num input {
  width: 37px;
  height: 25px;
  border: none;
  text-align: center;
  background-color: #fff;
}

.else {
  text-align: center;
  line-height: 500px;
}

footer {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 998;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  display: flex;
}
.footer-left {
  text-align: left;
  font-size: 16px;
  line-height: 50px;
  padding-right: 6px;
}
.footer-mid {
  flex: 1;
  text-align: right;
  font-size: 16px;
  line-height: 50px;
  padding-right: 6px;
}
.footer-mid span {
  color: red;
}
.footer-right {
  background-color: red;
  color: #fff;
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.mint-cell-title {
  display: none;
}

.mint-cell-value {
  width: 350px;
}

.mint-cell-swipe-button {
  line-height: 222px;
}

.subcon {
  width: 350px;
}
</style>
